<div class="py-3 extension-detail">
  <div class="sticky top-0 z-50 bg-white">
    <div class="pb-3">
      <a nz-button nzType="link" (click)="backToList()">
        <eo-iconpark-icon name="left" class="anticon" size="16px"></eo-iconpark-icon><span i18n>Back</span>
      </a>
    </div>
    <div class="bbd"></div>
  </div>
  <section class="h-full p-4 max-w-[80vw] mx-auto">
    <div class="flex">
      <i class="block w-24 h-24 mr-8 bg-center bg-no-repeat bg-cover border rounded-lg bd_all"
        [ngStyle]="{ 'background-image': 'url(' + (extensionDetail?.logo || '') + ')' }"></i>
      <div class="flex flex-col flex-1">
        <div class="flex flex-col">
          <span class="mb-2 text-xl font-bold">{{ extensionDetail?.moduleName }}</span>
          <p class="w-full h-20">{{ extensionDetail?.description }}</p>
        </div>
        <div class="flex"></div>
      </div>
    </div>
    <div class="flex w-full mt-6 h-[calc(100vh-350px)]">
      <div class="flex-auto min-w-0">
        <h2 class="text-lg font-bold" i18n>Intro</h2>
        <!-- <nz-divider></nz-divider> -->
        <div class="h-full overflow-auto markdown-desc">
          <nz-skeleton [nzLoading]="introLoading" [nzActive]="true">
            <eo-shadow-dom class="md-preview" [text]="extensionDetail?.introduction" [options]="{ html: true }">
            </eo-shadow-dom>
          </nz-skeleton>
        </div>
      </div>
      <div class="w-[1px] bg-[#f2f2f2] mr-[10px]"></div>
      <div class="shrink-0 w-[200px] 2xl:w-[250px] overflow-auto h-full">
        <h2 class="text-lg font-bold" i18n>Install</h2>
        <div class="flex items-center mt-[22px]" *ngIf="isElectron && !extensionDetail?.installed">
          <nz-skeleton-element *ngIf="isNotLoaded" nzType="button" nzSize="large" [nzActive]="true" style="width:100%">
          </nz-skeleton-element>
          <button *ngIf="isElectron && !isNotLoaded" nz-button nzType="primary" nzBlock nzSize="large"
            [nzLoading]="isOperating" (click)="manageExtension('install', extensionDetail?.name)" i18n>
            Install
          </button>
        </div>
        <div *ngIf="isElectron && extensionDetail?.installed">
          <nz-skeleton-element *ngIf="isNotLoaded" nzType="button" [nzActive]="true" nzSize="large" style="width:100%">
          </nz-skeleton-element>
          <button *ngIf="!isNotLoaded" nz-button nzBlock nzType="primary" nzDanger nzSize="large"
            [nzLoading]="isOperating" class="mt-[12px]" (click)="manageExtension('uninstall', extensionDetail?.name)"
            i18n>
            Uninstall
          </button>
        </div>

        <div *ngIf="!isElectron">
          <button nz-button nzType="primary" nz-dropdown [nzDropdownMenu]="download" class="!w-full" i18n>
            Download Client
          </button>
          <nz-dropdown-menu #download="nzDropdownMenu">
            <ul nz-menu>
              <ng-container *ngFor="let item of resourceInfo; let index = index">
                <a [href]="item.link" nz-menu-item>{{ item.name }}</a>
                <li nz-menu-divider *ngIf="index !== resourceInfo.length - 1"></li>
              </ng-container>
            </ul>
          </nz-dropdown-menu>
          <div class="bg-[#FF1744] p-[6px] mt-[14px] rounded-[3px] text-white" i18n>
            The extensions can only be installed on the client at present. Please download the client first~
          </div>
        </div>

        <h2 class="text-lg font-bold mt-[30px]" i18n>Support</h2>
        <nz-descriptions [nzColumn]="1" nzTitle="">
          <nz-descriptions-item i18n-nzTitle nzTitle="Author">{{ extensionDetail?.author }}</nz-descriptions-item>
          <nz-descriptions-item i18n-nzTitle nzTitle="Version">{{ extensionDetail?.version }} </nz-descriptions-item>
        </nz-descriptions>
      </div>
    </div>
  </section>
</div>
